import React, { Component } from 'react'
import { Text, View, ScrollView, StyleSheet } from 'react-native'
import { List } from '@ant-design/react-native'
import SearchBar from './Header'

let url = "http://81.70.7.43:3000/songs"

export default class Like extends Component {
    state = {
        musics: []
    }
    componentDidMount() {
        this.props.navigation.addListener('focus', () => {
            fetch(url).then(resp => resp.json())
                .then(musics => {
                    let loveMusic = []
                    musics.map(m => {
                        if (m.like === true) {
                            loveMusic.push(m)
                        }
                    })
                    this.setState({ musics: loveMusic })
                })
        })

    }
    render() {
        return (
            <View>
                <View>
                    <SearchBar />
                </View>
                <View style={styles.content}>
                    <ScrollView>
                        <List renderHeader={<Text style={styles.text}>我喜欢的音乐</Text>}>
                            {this.state.musics.map((m, minx) =>
                                <List.Item key={minx}>
                                    <View>
                                        <Text>{m.name}</Text>
                                        <Text>{m.singer}</Text>
                                    </View>
                                </List.Item>
                            )}
                        </List>
                    </ScrollView>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    content: {
        padding: 15
    },
    text: {
        fontSize: 25
    }
})
